<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>迈迪防 | 运营商硬件管理</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <% include "../login/header.html" %>
    <% include "../login/left.html" %>
    <div class="layui-body">
        <!-- 内容主体区域 -->

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>运营商硬件管理</legend>
        </fieldset>
        <div style="padding: 10px;">
                <span class="layui-breadcrumb">
                    <a href="/">首页</a>
                    <a>系统设置</a>
                    <a><cite>开放ip管理</cite></a>
                </span>
        </div>
        <form class="layui-form" action="">
            <div style="padding: 30px;">

                <div class="layui-inline">
                    <label class="layui-form-label">IP:</label>
                    <div class="layui-input-block">
                        <input style="width: 200px" type="text" name="ip_address" lay-verify="title" autocomplete="off" placeholder="请输入ip"
                               class="layui-input">
                    </div>
                </div>


                <div class="layui-inline">
                    <label class="layui-form-label">IP类型:</label>
                    <div class="layui-input-block">
                        <select name="ip_type" class="layui-input">
                            <option value="">请选择</option>
                            <option value="0">正常</option>
                            <option value="1">高危</option>
                            <option value="2">高防</option>
                        </select>
                    </div>
                </div>


                <div class="layui-inline">
                    <label class="layui-form-label">运营商:</label>
                    <div class="layui-input-block">
                        <select id="clc_belong" name="provider" class="layui-input">
                            <option value="">请选择</option>
                            <option value="中国移动">中国移动</option>
                            <option value="中国电信">中国电信</option>
                            <option value="中国联通">中国联通</option>
                            <option value="全网路线">全网路线</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="find">查询</button>
                </div>
            </div>
        </form>
        <div style="padding: 20px">

            <div >
                <a id='add_operator' class="layui-btn">新增</a>
                <a id='import_operator' class="layui-btn">导入</a>
            </div>
            <table class="layui-table" lay-skin="nob" id="demo" lay-filter="test"></table>



        </div>
    </div>

    <div id="add-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="add-form">
            <input type="hidden" name="id" value="" id="add-id">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">加速线路名称</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="route_name" placeholder="请输入加速线路" class="layui-input"
                    >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">运营商</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_operator" placeholder="请输入运营商" class="layui-input"
                    >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">地区</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_region" placeholder="请输入地区" class="layui-input"
                    >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="add-main">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-add">退出</button>
                </div>
            </div>
        </form>
    </div>

    <div id="update-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="update-form">
            <input type="hidden" name="id" value="" id="news-id">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">ip地址</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="ip_address" placeholder="请输入ip" class="layui-input"
                           id='ip_address'>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">营运商</label>
                <div class="layui-input-inline" style="width: 400px">
                    <select name="provider" lay-verify="required" lay-search="" id='provider'>
                        <option value=" ">请选择</option>
                        <option value="中国移动">中国移动</option>
                        <option value="中国电信">中国电信</option>
                        <option value="中国联通">中国联通</option>
                        <option value="全网路线">全网路线</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">防御流量(G)</label>
                <div class="layui-input-inline" style="left: 10px;top: 16px;width: 400px" name="armor_class" id="armor_class"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">带宽(M)</label>
                <div class="layui-input-inline" style="left: 10px;top: 16px;width: 400px" name="broadband" id="broadband"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">承载上限</label>
                <div class="layui-input-inline" style="left: 10px;top: 16px;width: 400px" name="top_limit" id="top_limit"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">机房</label>
                <div class="layui-input-inline" style="width: 400px">
                    <select name="location_name" lay-verify="required" lay-search="" id='location_name'>
                        <option value=" ">请选择</option>
                        <option selected value="1">游戏</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">ip类型</label>
                <div class="layui-input-inline" style="width: 400px">
                    <select name="ip_type" lay-verify="required" lay-search="" id='ip_type'>
                        <option value=" ">请选择</option>
                        <option selected value="1">正常ip</option>
                        <option selected value="1">高危ip</option>
                        <option selected value="1">高防ip</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="update-main">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-update">退出</button>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</a>


    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable"><i
            class="layui-icon layui-icon-delete"></i>删除</a>

</script>

<script src="../static/layui/layui.js"></script>
<script src="../static/assets/js/global.js"></script>
<script>
  layui.use(['common'], function () {
    let common = layui.common;
    let form = layui.form,
      $ = layui.jquery,
      table = layui.table,
      layer = layui.layer;
        //
      //渲染
      let armor_class =100;
      let broadband =1;
      let top_limit =1;
    armor_class = common.setSlider('#armor_class',100,10000,100,armor_class);
    let slid_broadband = common.setSlider('#broadband',1,1000,1,broadband);
    let slid_top_limit = common.setSlider('#top_limit',1,10000,1,top_limit);
    // common.setSelect("/operatorDevice/getBelong", 'clc_belong',true);
    let addConfigData = document.getElementById('add_operator');
    addConfigData.addEventListener('click', function cancel() {
      common.showLayer({title:['新增配置信息', 'font-size:25px;text-align:center'],width:'600px',height: '400px',name:'#add-main'});
    });

    let close_update = document.getElementById('exit-update');
    close_update.addEventListener('click', function cancel() {
      layui.layer.closeAll();
    });
    let close_add = document.getElementById('exit-add');
    close_add.addEventListener('click', function cancel() {
      layui.layer.closeAll();
    });

    table.render({
      elem: '#demo'
      , height: 500
      , url: '/operatorDevice/getIp/' //数据接口
      , page: true //开启分页
      , title: '应用列表'
      , skin: "line"
      , even: true
      , cols: [[ //表头
        {field: 'ip_address', title:'ip地址', width: 200}
        , {
          field: 'ip_type', title: '类型', cellMinWidth: 200, templet: function (d) {
            if(d.ip_type==0){
              return '正常IP'
            }
            if(d.ip_type==1){
              return '高危IP'
            }
            if(d.ip_type==2){
              return '高防IP'
            }
          }
        }
        , {field: 'armor_class', title: '防御流量', width: 150}
        , {field: 'broadband', title: '带宽', cellMinWidth: 200}
        , {field: 'top_limit', title: '承载上限', cellMinWidth: 200}
        , {field: 'provider', title: '运营商', cellMinWidth: 200}
        , {field: 'location_name', title: '机房', cellMinWidth: 200}
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', cellMinWidth: 200}
      ]]
    });

    table.on('tool(test)', (obj) => {
      let data = obj.data;

      console.log(data);
      $('#news-id')[0].value = data.id;
      $('#ip_type')[0].value = data.ip_type;
      $('#provider')[0].value = data.provider;
      $('#location_name')[0].value = data.location_name;
      // slid_armor_class[0].setValue(data.armor_class);
      // slid_broadband[0].setValue(data.broadband);
      // slid_top_limit[0].setValue(data.top_limit);
      if (obj.event === 'edit') {
        common.showLayer({title:['编辑数据', 'font-size:25px;text-align:center'],width:'600px',height: '700px',name:'#update-main'});
      } else if (obj.event === 'enable') {

      }
    });

    form.on('submit(find)', function (data) {
        console.log(data)
      common.find(data,'demo','/operatorDevice/getIp');
      return false;
    });

    form.on('submit(add-main)', function (data) {
      let params = data.field;
      let msg = {
        url: '/operatorDevice/addOperator',
        data: params
      };

      common.postMsg(msg, (data) => {
        if (data.success) {
          layer.closeAll();
          layer.msg('添加成功');
          table.reload('demo');
        } else {
          layer.msg(`添加失败,${data.msg}`);
        }
      });
      return false;
    });

    form.on('submit(update-main)', function (data) {
      let params = data.field;
      console.log("armor_classarmor_classarmor_class",data,armor_class);
      // params.armor_class =slid_armor_class[1];
      // params.broadband =slid_broadband[1];
      // params.top_limit =slid_top_limit[1];

      console.log("params",params);
      let msg = {
        url: '/operatorDevice/editIp',
        data: params
      };

      common.postMsg(msg, (data) => {
        if (data.success) {
          layer.closeAll();
          layer.msg('编辑成功');
          common.setSelect("/operatorDevice/getBelong", 'clc_belong',true);
          table.reload('demo');
        } else {
          layer.msg(`编辑失败,${data.msg}`);
        }
      });
      return false;
    });
  });
</script>
</body>
</html>
